<script setup>
import { ref } from 'vue';
const show = ref(false);
const showPopup = () => {
   show.value = true;
};
const pList = ref([
   {name:'首页',href:"/"},
   {name:'都市',href:"/"},
   {name:'科幻',href:"/"},
   {name:'历史',href:"/"},
   {name:'游戏',href:"/"},
   {name:'悬疑',href:"/"},
]);
let activeLin = ref(0);

</script>

<template>
   <div class="popup">
      <van-cell title="热门分类" is-link @click="showPopup"/>
      <van-popup v-model:show="show" :style="{width: '60%',height:'100%'}" position="right" closeable close-icon-position="top-left">
         <div class="popuplist">
            <h4>热门分类</h4>
            <ul>
               <li v-for="(item,i) in pList" :key="i" :class="activeLin ==i ? 'active' : ''" @click="activeLin = i">
                  <span>{{item.name}}</span>
               </li>
            </ul>
         </div>
      </van-popup>
   </div>
</template>

<style scoped></style>